<template>
  <div>

      <a-form ref="landResourceForm" class="form"  :form="landResourceForm">

        <a-row>
          <a-col :span="8">
            <a-form-item label="土地ID" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
              <a-input
                placeholder="请输入土地ID"
                maxlength="50"
                v-model="landResourceFormData.landId"
                autocomplete="off"
                v-decorator="['landResourceFormData.landId',
                                {rules: [{ required: true, message: '请输入土地ID', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="证照编号" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
              <a-input
                placeholder="证照编号"
                maxlength="50"
                autocomplete="off"
                v-model="landResourceFormData.licenseNum"
                v-decorator="['landResourceFormData.licenseNum',
                                {rules: [{ required: true, message: '请输入证照编号', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="证照类型" :labelCol=" { span: 9 }" :wrapperCol=" { span: 12 }">
              <a-select placeholder="请选择证照类型" v-model="landResourceFormData.licenseType">
                <a-select-option v-for="(item,index) in licenseTypeList" :key="index" :value="item.name">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="权属证照电子地图" :labelCol=" { span: 3 }" :wrapperCol=" { span: 19 }">
              <a-upload-dragger name="file" v-if="landResourceFormData.imgMap==''" :multiple="false" action="https://www.mocky.io77/v2/5cc8019d300000980a055e76" @change="handleChangeImg">
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">点击或将图片拖拽到这里上传</p>
                <p class="ant-upload-hint">支持扩展名：.pdf .jpg .png ...</p>
              </a-upload-dragger>
              <!--:fileList="fileImgList"-->
              <!-- <a-upload
                 action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                 listType="picture-card"
                 :showUploadList="false"
                 :beforeUpload="beforeUpload"
                 @change="handleChangeImg"
               >
                 <div    v-if="landResourceFormData.imgMap==''">
                   <a-icon type="plus"  />
                   <div class="ant-upload-text">点击上传</div>
                 </div>
               </a-upload>-->
              <img :src="landResourceFormData.imgMap" v-if="landResourceFormData.imgMap!=''"  height="300px" alt="">
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="土地使用人（权利人）" :labelCol=" { span: 3 }" :wrapperCol=" { span: 20 }">
              <a-input
                placeholder="土地使用人（权利人）"
                maxlength="50"
                autocomplete="off"
                v-model="landResourceFormData.landUser"
                v-decorator="['landResourceFormData.landUser',
                                {rules: [{ required: true, message: '请输入土地使用人', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>


          <a-col :span="8">
            <a-form-item label="图号" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
              <a-input
                placeholder="请输入图号"
                maxlength="50"
                autocomplete="off"
                v-model="landResourceFormData.mapNum"

                v-decorator="['landResourceFormData.mapNum',
                                {rules: [{ required: true, message: '请输入图号', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="地类用途" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
              <a-select defaultValue="地类用途类型1"  v-model="landResourceFormData.landTypeUse">
                <a-select-option value="地类用途类型1">地类用途类型1</a-select-option>
                <a-select-option value="地类用途类型2">地类用途类型2</a-select-option>
                <a-select-option value="地类用途类型3">地类用途类型3</a-select-option>
                <a-select-option value="地类用途类型4">地类用途类型4</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="使用终止日期" :labelCol=" { span: 9 }" :wrapperCol=" { span: 12 }">
              <!--:defaultValue="moment(landResourceFormData.useEndTime, 'YYYY-MM-DD')"-->
              <a-date-picker
                format="YYYY-MM-DD"
                style="width: 100%"
                :disabledDate="disabledDate"
                placeholder="使用终止日期"
                :value="landResourceFormData.useEndTime?moment(landResourceFormData.useEndTime, 'YYYY-MM-DD'):moment(new Date(), 'YYYY-MM-DD')"
                @change="dataChangeValidBegintime"
                :showToday="false"
              />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="发证单位" :labelCol=" { span: 3 }" :wrapperCol=" { span: 20 }">
              <a-input
                placeholder="发证单位"
                maxlength="50"
                autocomplete="off"
                v-model="landResourceFormData.sendBranch"

                v-decorator="['landResourceFormData.sendBranch',
                                {rules: [{ required: true, message: '请输入土地使用人', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>


          <a-col :span="8">
            <a-form-item label="使用权面积" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
              <a-input
                placeholder="请输入使用权面积"
                maxlength="50"
                autocomplete="off"
                v-model="landResourceFormData.useArea"

                v-decorator="['landResourceFormData.useArea',
                                {rules: [{ required: true, message: '请输入使用权面积', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="独用面积" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
              <a-input
                placeholder="请输入独用面积"
                maxlength="50"
                autocomplete="off"
                v-model="landResourceFormData.duYouArea"

                v-decorator="['landResourceFormData.duYouArea',
                                {rules: [{ required: true, message: '请输入独用面积', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="分摊面积" :labelCol=" { span: 9 }" :wrapperCol=" { span: 12 }">
              <a-input
                placeholder="请输入分摊面积"
                maxlength="50"
                autocomplete="off"
                v-model="landResourceFormData.fenTanArea"

                v-decorator="['landResourceFormData.fenTanArea',
                                {rules: [{ required: true, message: '请输入分摊面积', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="建档日期" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
              <a-date-picker
                format="YYYY-MM-DD"
                style="width: 100%"
                :disabledDate="disabledDate"
                placeholder="建档日期"
                :value="landResourceFormData.createDate?moment(landResourceFormData.createDate, 'YYYY-MM-DD'):moment(new Date(), 'YYYY-MM-DD')"
                @change="dataChangeValidBegintime2"
                :showToday="false"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="建档人员" :labelCol=" { span: 9 }" :wrapperCol=" { span: 13 }">
              <a-input
                placeholder="请输入建档人员"
                maxlength="50"
                autocomplete="off"
                v-model="landResourceFormData.createPeople"

                v-decorator="['landResourceFormData.createPeople',
                                {rules: [{ required: true, message: '请输入建档人员', whitespace: true}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="土地所有类别" :labelCol=" { span: 9 }" :wrapperCol=" { span: 12 }">
              <a-select placeholder="土地所有类别" v-model="landResourceFormData.landType">
                <a-select-option v-for="(item,index) in landTypeList" :key="index" :value="item.name">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>


          <a-col :span="24">
            <a-form-item label="电子文档" :labelCol=" { span: 3 }" :wrapperCol=" { span: 19 }">
                <up-load-drag @change="handleUploadChange"></up-load-drag>
            </a-form-item>
          </a-col>


        </a-row>

      </a-form>

  </div>
</template>

<script>

  import FooterToolBar from '@/components/tools/FooterToolBar'
  import cities from '@/db/cities'
  import indexedDB from '../../db/db'
  import {getBase64} from '../../utils/util'
  import moment from "moment"
  import UpLoadDrag from '@/components/upload/UpLoadDrag'
  export default {
    name: "landFormTemplate",
    components: {
      FooterToolBar,
        UpLoadDrag
    },
    props:{
      landResourceFormDataJson:Object
    },
    data() {
      return {
        options:cities,
        loading: false,
        landResourceForm:this.$form.createForm(this),
        fileImgList:"",
        landResourceFormData:{
          landId:"",
          licenseNum:"",
          licenseType:"",
          imgMap:"",
          landUser:"",
          mapNum:"",
          landTypeUse:"",
          useEndTime:"",
          sendBranch:"",
          useArea:"",
          duYouArea:"",
          fenTanArea:"",
          createDate:"",
          createPeople:"",
          landType:"",
          wordUrl:"",
          state:"待审核",
            files:[]
        },
        licenseTypeList:[],
        landTypeList:[],
        

      }
    },
    mounted(){
      this.landResourceFormData = this.landResourceFormDataJson;
      this.getDictionaryList(9,1);
      this.getDictionaryList(10,2);
    },
    methods: {
        handleUploadChange(list){
            // console.log(list)
            this.landResourceFormData.files = list
        },
      getDictionaryList(num,code) {
        let that = this

        indexedDB.handleDataByIndex('dictionary',  IDBKeyRange.only(num),'type_id').then(res => {

          console.log(res)
          if (res.length > 0) {
            if(code==1){
              that.licenseTypeList = res;
            }else if(code==2){
              that.landTypeList = res;
            }

          }
        })
      },
      handleDivisonChange(e){

      },
      disabledDate(current) {
        // Can not select days before today and today
        // return current && current < moment().endOf('day');
        let yd = new Date().getDate();
        let y  = new Date().getFullYear();
        let m  = new Date().getMonth()+1;
        return current && current < new Date(y+"-"+m+"-"+yd);
      },
      moment,
      /*日期赋值*/
      dataChangeValidBegintime(data,pic){
        this.landResourceFormData.useEndTime = pic;
      },
      dataChangeValidBegintime2(data,pic){
        this.landResourceFormData.createDate = pic;
      },
      beforeUpload (file) {
        const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png'|| file.type === 'image/jpg'|| file.type === 'image/pdf'
        if (!isJPG) {
          this.$message.error('上传格式不正确!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传大小不能大于2M!')
        }
        return isJPG && isLt2M
      },
      handleChangeImg(info) {
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.landResourceFormData.imgMap = imageUrl
          // console.log(imageUrl)
        })


      },
      handleChange(info) {
        // console.log(info);
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.landResourceFormData.wordUrl = imageUrl
          // console.log(imageUrl)
        })
      },
      saveFormData(){
        let _this = this
        this.landResourceForm.validateFields((err, values) => {
          // console.log(values);
          // console.log(err);
          if (!err) {
            indexedDB.insert({name:"landResource"},_this.landResourceFormData).then((res)=>{
              console.log(res);
              if(res==true){
                _this.$message.info("提交成功");
                _this.landResourceFormData = {
                  landId:"",
                  licenseNum:"",
                  licenseType:"",
                  imgMap:"",
                  landUser:"",
                  mapNum:"",
                  landTypeUse:"",
                  useEndTime:"",
                  sendBranch:"",
                  useArea:"",
                  duYouArea:"",
                  fenTanArea:"",
                  createDate:"",
                  createPeople:"",
                  landType:"",
                  wordUrl:"",
                };
                _this.landResourceForm.resetFields();
              }else{
                this.$message.error("保存失败！");
              }
            });
          }else{
            _this.$message.error("请输入必填值");
          }
        })

      },

      handleEdit(record){
        this.landResourceFormData = Object.assign({}, record)
        setTimeout(()=>{
          this.landResourceForm.setFieldsValue({
            "landResourceFormData.landId":this.landResourceFormData.landId,
            "landResourceFormData.licenseNum":this.landResourceFormData.licenseNum,
            "landResourceFormData.landUser":this.landResourceFormData.landUser,
            "landResourceFormData.mapNum":this.landResourceFormData.mapNum,
            "landResourceFormData.sendBranch":this.landResourceFormData.sendBranch,
            "landResourceFormData.useArea":this.landResourceFormData.useArea,
            "landResourceFormData.duYouArea":this.landResourceFormData.duYouArea,
            "landResourceFormData.fenTanArea":this.landResourceFormData.fenTanArea,
            "landResourceFormData.createPeople":this.landResourceFormData.createPeople,
          })

        }, 200);

      },
      editeSaveFormData(){
        let _this = this
        console.log(_this.landResourceFormData)
        _this.landResourceFormData.state = "待审核";
        this.landResourceForm.validateFields((err, values) => {
          // console.log(values);
          // console.log(err);
          if (!err) {
            indexedDB.update({name:"landResource"},_this.landResourceFormData).then((res)=>{
              console.log(res);
              if(res==true){
                _this.$message.info("保存成功");
                _this.landResourceFormData = {
                  landId:"",
                  licenseNum:"",
                  licenseType:"",
                  imgMap:"",
                  landUser:"",
                  mapNum:"",
                  landTypeUse:"",
                  useEndTime:"",
                  sendBranch:"",
                  useArea:"",
                  duYouArea:"",
                  fenTanArea:"",
                  createDate:"",
                  createPeople:"",
                  landType:"",
                  wordUrl:"",
                  state:"待审核",
                };
                _this.landResourceForm.resetFields();
                this.$emit('fatherEditMethod');
              }else{
                _this.$message.error("保存失败！");
              }
            });
          }else{
            _this.$message.error("请输入必填值");
          }
        })
      },


    },
  }
</script>

<style lang="scss" scoped>
  .card {
    margin-bottom: 24px;
  }
</style>